<template>
  <div class="tech-view content-container">
    <!-- 粒子背景 -->
    <div id="particles-bg" class="particles-background"></div>
    <!-- 头部横幅 -->
    <div class="tech-header">
      <div class="header-bg">
        <img src="../assets/科技数码展宣传图.jpg" alt="科技专题" class="header-image">
        <div class="header-overlay"></div>
      </div>
      <div class="header-content">
        <h1 class="header-title">科技创新</h1>
        <p class="header-subtitle">探索前沿科技，引领未来生活</p>
      </div>
    </div>

    <!-- 主要内容区域 -->
      <div class="tech-content content-wrapper">
      <!-- 热门科技资讯 -->
      <div class="tech-news-section">
        <div class="section-header">
          <h2 class="section-title">🔥 热门科技资讯</h2>
          <a href="#" class="section-more">更多 <i class="fa fa-angle-right"></i></a>
        </div>
        
        <div class="featured-news">
          <div 
            v-for="(news, index) in hotTechNews" 
            :key="news.id"
            class="news-item"
            :class="{ 'featured': index === 0 }"
            @click="openNews(news)"
          >
            <div class="news-image-container">
              <img :src="news.image" alt="{{ news.title }}" class="news-image">
              <span class="news-tag">{{ news.category }}</span>
            </div>
            <div class="news-content">
              <h3 class="news-title">{{ news.title }}</h3>
              <p class="news-summary">{{ news.summary }}</p>
              <div class="news-meta">
                <span class="news-time">{{ news.time }}</span>
                <span class="news-views"><i class="fa fa-eye"></i> {{ formatNumber(news.views) }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 内容分割线 -->
      <div class="section-divider"></div>

      <!-- 科技视频和产品评测区域 -->
      <div class="tech-main-content">
        <!-- 左侧：科技视频 -->
        <div class="tech-videos">
          <div class="section-header">
            <h2 class="section-title">📹 科技视频</h2>
            <a href="#" class="section-more">更多 <i class="fa fa-angle-right"></i></a>
          </div>
          
          <div class="tech-videos-grid">
            <div 
              v-for="video in techVideos" 
              :key="video.id"
              class="tech-video-card"
              @click="playVideo(video)"
            >
              <div class="video-thumbnail">
                <img :src="video.thumbnail" alt="{{ video.title }}" class="video-image">
                <div class="video-duration">{{ video.duration }}</div>
              </div>
              <div class="video-info">
                <h3 class="video-title">{{ video.title }}</h3>
                <div class="video-meta">
                  <span class="video-author">{{ video.author }}</span>
                  <span class="video-views"><i class="fa fa-eye"></i> {{ formatNumber(video.views) }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧：产品评测 -->
        <div class="tech-reviews">
          <div class="section-header">
            <h2 class="section-title">🔍 产品评测</h2>
            <a href="#" class="section-more">更多 <i class="fa fa-angle-right"></i></a>
          </div>
          
          <div class="product-reviews-list">
            <div 
              v-for="review in productReviews" 
              :key="review.id"
              class="product-review-item"
              @click="openReview(review)"
            >
              <div class="review-rating">
                <div class="rating-stars">
                  <i 
                    v-for="n in 5" 
                    :key="n"
                    class="fa"
                    :class="{ 'fa-star': n <= review.rating, 'fa-star-o': n > review.rating }"
                  ></i>
                </div>
                <span class="rating-number">{{ review.rating }}.0</span>
              </div>
              <div class="review-content">
                <h3 class="review-title">{{ review.productName }}</h3>
                <p class="review-summary">{{ review.summary }}</p>
                <div class="review-meta">
                  <span class="review-date">{{ review.date }}</span>
                  <span class="review-likes"><i class="fa fa-thumbs-up"></i> {{ formatNumber(review.likes) }}</span>
                </div>
              </div>
              <div class="review-image">
                <img :src="review.productImage" alt="{{ review.productName }}" class="product-image">
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 最新科技产品 -->
      <div class="tech-products-section">
        <div class="section-header">
          <h2 class="section-title">💻 最新科技产品</h2>
          <a href="#" class="section-more">更多 <i class="fa fa-angle-right"></i></a>
        </div>
        
        <div class="tech-products-carousel">
          <div 
            v-for="product in newTechProducts" 
            :key="product.id"
            class="tech-product-card"
            @click="viewProduct(product)"
          >
            <div class="product-thumbnail">
              <img :src="product.image" alt="{{ product.name }}" class="product-image">
            </div>
            <div class="product-info">
              <h3 class="product-name">{{ product.name }}</h3>
              <p class="product-price">{{ product.price }}</p>
              <div class="product-meta">
                <span class="product-category">{{ product.category }}</span>
                <span class="product-rating"><i class="fa fa-star"></i> {{ product.rating }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TechView',
  data() {
    return {
      // 热门科技资讯
      hotTechNews: [
        { id: 1, title: '人工智能新突破：大型语言模型展现惊人能力', image: '../assets/科技数码展宣传图.jpg', category: 'AI技术', summary: '最新研究显示，新一代大型语言模型在理解上下文和生成内容方面取得了重大进展，为各行业应用带来新机遇。', time: '2小时前', views: 1250000 },
        { id: 2, title: '苹果发布全新MacBook Pro，搭载自研M3芯片', image: '../assets/数码科技展.png', category: '新品发布', summary: '苹果公司今日发布了搭载M3芯片的全新MacBook Pro，性能提升30%，电池续航时间延长至最长22小时。', time: '5小时前', views: 980000 },
        { id: 3, title: '5G技术应用加速，物联网生态系统逐步成熟', image: '../assets/数码科技展.png', category: '通信技术', summary: '随着5G网络覆盖扩大，物联网设备数量激增，智能家居、智慧城市等应用场景不断丰富。', time: '昨天', views: 720000 },
        { id: 4, title: '量子计算研究获重要进展，商业化进程加速', image: '../assets/科技数码展宣传图.jpg', category: '前沿科技', summary: '量子计算领域最近取得突破性进展，多家科技巨头加大投资，预计5年内实现初步商业化应用。', time: '昨天', views: 860000 },
      ],
      
      // 科技视频
      techVideos: [
        { id: 11, title: '【深度评测】iPhone 15 Pro Max使用一周体验', thumbnail: '../assets/科技数码展宣传图.jpg', duration: '18:30', author: '科技评测室', views: 5800000 },
        { id: 12, title: '一文看懂人工智能大模型的工作原理', thumbnail: '../assets/数码科技展.png', duration: '25:15', author: 'AI科普频道', views: 7200000 },
        { id: 13, title: '搭建个人NAS服务器，实现家庭数据中心', thumbnail: '../assets/数码科技展.png', duration: '32:45', author: '数码玩家', views: 3500000 },
        { id: 14, title: '2023年最值得购买的笔记本电脑推荐', thumbnail: '../assets/科技数码展宣传图.jpg', duration: '28:20', author: '电脑选购指南', views: 9400000 },
        { id: 15, title: 'VR/AR眼镜深度对比：谁是下一代计算平台？', thumbnail: '../assets/科技数码展宣传图.jpg', duration: '22:10', author: '元宇宙探索者', views: 6700000 },
        { id: 16, title: '智能家居系统搭建全攻略，从入门到精通', thumbnail: '../assets/科技数码展宣传图.jpg', duration: '45:30', author: '智能家居达人', views: 8200000 },
      ],
      
      // 产品评测
      productReviews: [
        { id: 21, productName: '索尼A7M5全画幅微单相机', productImage: '../assets/数码科技展.png', rating: 4.8, summary: '索尼最新旗舰微单相机，对焦速度提升，高感性能出色，视频功能强大，是专业摄影师的理想选择。', date: '2023-11-15', likes: 125000 },
        { id: 22, productName: 'NVIDIA RTX 4080显卡', productImage: '../assets/科技数码展宣传图.jpg', rating: 4.7, summary: 'RTX 4080提供强大的光线追踪性能，DLSS 3技术加持，游戏和创作体验都有显著提升。', date: '2023-11-10', likes: 186000 },
        { id: 23, productName: 'Bose QuietComfort Ultra降噪耳机', productImage: '../assets/数码科技展.png', rating: 4.9, summary: 'Bose最新降噪旗舰，音质表现出色，主动降噪效果一流，佩戴舒适度高，电池续航长达30小时。', date: '2023-11-05', likes: 156000 },
        { id: 24, productName: '三星Galaxy Z Fold 5折叠屏手机', productImage: '../assets/科技数码展宣传图.jpg', rating: 4.5, summary: '第五代折叠屏旗舰，铰链设计改进，屏幕耐用性提升，多任务处理能力强大，是商务人士的理想选择。', date: '2023-11-01', likes: 143000 },
        { id: 25, productName: '戴森V15 Detect无线吸尘器', productImage: '../assets/数码科技展.png', rating: 4.6, summary: '激光探测技术让灰尘无处遁形，强劲吸力和智能调节功能让清洁更高效，是高端吸尘器的代表作。', date: '2023-10-28', likes: 98000 },
        { id: 26, productName: '微软Surface Studio 2+一体机', productImage: '../assets/科技数码展宣传图.jpg', rating: 4.7, summary: '创意工作者的理想工作站，32英寸触控屏，强劲性能，灵活的创作姿势，为设计师和艺术家打造。', date: '2023-10-25', likes: 112000 },
      ],
      
      // 最新科技产品
      newTechProducts: [
        { id: 31, name: '华为Mate 60 Pro 5G手机', image: '../assets/科技数码展宣传图.jpg', price: '¥6999起', category: '智能手机', rating: 4.8 },
        { id: 32, name: '小米手环8 Pro智能穿戴', image: '../assets/数码科技展.png', price: '¥399', category: '智能穿戴', rating: 4.6 },
        { id: 33, name: '戴尔XPS 13 Plus笔记本电脑', image: '../assets/科技数码展宣传图.jpg', price: '¥10999起', category: '笔记本电脑', rating: 4.7 },
        { id: 34, name: '腾讯极光盒子4 Pro电视盒', image: '../assets/数码科技展.png', price: '¥599', category: '智能家居', rating: 4.5 },
        { id: 35, name: 'Apple Watch Ultra运动手表', image: '../assets/科技数码展宣传图.jpg', price: '¥6299起', category: '智能穿戴', rating: 4.9 },
        { id: 36, name: '佳能EOS R50微单相机', image: '../assets/数码科技展.png', price: '¥4799起', category: '相机', rating: 4.6 },
      ],
    }
  },
  mounted() {
    // 粒子背景初始化 - 减少粒子数量提高性能
    const container = document.getElementById('particles-bg')
    this.initParticles(container, 100) // 减少到100个粒子，提升性能
  },
  methods: {
    // 初始化粒子背景 - 优化性能
    initParticles(container, count) {
      if (!container) return
      
      // 清除容器
      container.innerHTML = ''
      
      // 创建粒子
      const particles = []
      for (let i = 0; i < count; i++) {
        const particle = this.createParticle(container)
        container.appendChild(particle.element)
        particles.push(particle)
      }
      
      // 动画循环 - 优化性能
      let lastTime = 0
      const frameSkip = 2 // 每2帧更新一次，减少计算量
      let frameCount = 0
      
      function animate(currentTime) {
        if (!lastTime) lastTime = currentTime
        const deltaTime = currentTime - lastTime
        
        frameCount++
        if (frameCount % frameSkip === 0) {
          particles.forEach(particle => {
            // 更新位置 - 缓慢移动
            particle.x += particle.vx
            particle.y += particle.vy
            
            // 边界检测并反弹
            if (particle.x < 0 || particle.x > container.clientWidth) {
              particle.vx = -particle.vx
            }
            if (particle.y < 0 || particle.y > container.clientHeight) {
              particle.vy = -particle.vy
            }
            
            // 减少随机样式更新频率
            if (Math.random() < 0.005) {
              const newOpacity = Math.random() * 0.8 + 0.2
              particle.element.style.opacity = newOpacity
            }
            
            // 应用位置
            particle.element.style.transform = `translate(${particle.x}px, ${particle.y}px)`
          })
        }
        
        lastTime = currentTime
        requestAnimationFrame(animate)
      }
      
      // 开始动画
      animate()
    },
    
    // 创建单个粒子 - 简化样式提高性能
    createParticle(container) {
      const particle = document.createElement('div')
      // 减小粒子尺寸
      const size = Math.random() * 2 + 1 // 1-3px大小的粒子
      
      // 设置样式
      particle.className = 'particle'
      particle.style.width = `${size}px`
      particle.style.height = `${size}px`
      // 简化样式
      const opacity = Math.random() * 0.7 + 0.3
      particle.style.background = 'white'
      particle.style.opacity = opacity
      
      // 随机位置
      const x = Math.random() * container.clientWidth
      const y = Math.random() * container.clientHeight
      
      // 更缓慢的速度
      const vx = (Math.random() - 0.5) * 0.1
      const vy = (Math.random() - 0.5) * 0.1
      
      // 设置初始位置
      particle.style.left = `${x}px`
      particle.style.top = `${y}px`
      
      return {
        element: particle,
        x,
        y,
        vx,
        vy,
        size,
        opacity,
      }
    },
    
    // 打开科技资讯
    openNews(news) {
      console.log('打开资讯:', news.title)
      // 实际应用中，这里应该跳转到资讯详情页
      // this.$router.push(`/news/${news.id}`);
    },
    
    // 播放视频
    playVideo(video) {
      console.log('播放视频:', video.title)
      // 实际应用中，这里应该跳转到视频播放页面
      // this.$router.push(`/video/${video.id}`);
    },
    
    // 打开产品评测
    openReview(review) {
      console.log('查看评测:', review.productName)
      // 实际应用中，这里应该跳转到评测详情页
      // this.$router.push(`/review/${review.id}`);
    },
    
    // 查看产品详情
    viewProduct(product) {
      console.log('查看产品:', product.name)
      // 实际应用中，这里应该跳转到产品详情页
      // this.$router.push(`/product/${product.id}`);
    },
    
    // 格式化数字
    formatNumber(num) {
      if (num >= 100000000) {
        return (num / 100000000).toFixed(1) + '亿'
      } else if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万'
      }
      return num.toString()
    },
  },
}
</script>

<style scoped>
/* 粒子背景样式 - 黑白星空效果 */
#particles-bg {
  /* 使用!important确保样式优先级 */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: -2 !important; /* 降低z-index确保在所有内容之下 */
  overflow: hidden !important;
  pointer-events: none !important;
  background: #000 !important; /* 黑色背景，模拟宇宙 */
}
  
  /* 科技视频区域样式 - 移除backdrop-filter提高性能 */
    .tech-videos {
      background-color: rgba(30, 30, 30, 0.95);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      padding: 20px;
    }
  
    /* 科技视频卡片样式 - 移除backdrop-filter提高性能 */
    .tech-video-card {
      background-color: rgba(40, 40, 40, 0.95);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 8px;
      overflow: hidden;
      transition: all 0.3s ease;
    }
  
    /* 产品评测区域样式 - 移除backdrop-filter提高性能 */
    .tech-reviews {
      background-color: rgba(30, 30, 30, 0.95);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      padding: 20px;
    }
    
    /* 页脚样式 */
      .tech-footer {
        text-align: center;
        padding: 40px 20px;
        background-color: transparent; /* 改为透明背景，显示粒子效果 */
        border-top: 1px solid rgba(255, 255, 255, 0.1);
      }

  .particle {
  position: absolute !important;
  border-radius: 50% !important;
  background: white !important;
  /* 简化box-shadow减少GPU消耗 */
  box-shadow: 0 0 3px 2px rgba(255, 255, 255, 0.5) !important;
  /* 移除CSS动画，使用JS控制减少渲染压力 */
  z-index: -1 !important;
  transform: translateZ(0); /* 启用硬件加速 */
  will-change: transform, opacity;
}

/* 科技页面整体样式 */
.tech-view {
  min-height: 100vh;
  background-color: #000; /* 黑色背景，模拟宇宙 */
  position: relative;
  overflow: hidden;
}

/* 头部横幅样式 */
.tech-header {
  position: relative;
  height: 400px;
  overflow: hidden;
  margin-bottom: 30px;
  background-color: transparent; /* 改为透明背景 */
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent; /* 移除任何背景，显示粒子效果 */
}

.header-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 0.5s ease;
  opacity: 0.4;
  filter: grayscale(30%); /* 轻微灰度效果，符合黑白星空主题 */
}

.tech-header:hover .header-image {
  transform: scale(1.1);
}

.header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3); /* 移除渐变，使用半透明黑色 */
}

.header-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px;
  text-align: center;
  color: white;
}

.header-title {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.header-subtitle {
  font-size: 18px;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 主要内容区域 */
.tech-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 40px;
  background-color: transparent; /* 改为透明背景，显示粒子效果 */
}

/* 通用区域标题样式 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
}

.section-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
}

.section-more {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.3s ease;
}

.section-more:hover {
  color: var(--primary-color);
}

/* 热门科技资讯区域 */
  .tech-news-section {
    background-color: rgba(30, 30, 30, 0.8); /* 深色半透明背景 */
    backdrop-filter: blur(10px); /* 添加毛玻璃效果 */
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1); /* 添加半透明边框 */
  }

.featured-news {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
  background-color: transparent;
}

.news-item {
  display: flex;
  flex-direction: column;
  background-color: rgba(40, 40, 40, 0.85); /* 深色半透明背景 */
  backdrop-filter: blur(5px); /* 添加毛玻璃效果 */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.15); /* 添加半透明边框 */
}

.news-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.news-item.featured {
  grid-column: span 2;
  flex-direction: row;
}

.news-image-container {
  position: relative;
  width: 100%;
  padding-top: 60%; /* 5:3 宽高比 */
  overflow: hidden;
}

.news-item.featured .news-image-container {
  width: 40%;
  padding-top: 0;
  height: 100%;
}

.news-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.news-item:hover .news-image {
  transform: scale(1.05);
}

.news-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: var(--primary-color);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.news-content {
  padding: 15px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.news-item.featured .news-content {
  width: 60%;
  padding: 20px;
}

.news-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 10px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-item.featured .news-title {
  font-size: 24px;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.news-summary {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 auto 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-item.featured .news-summary {
  font-size: 16px;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

.news-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  font-size: 13px;
  color: var(--text-secondary);
}

.news-views {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 内容分割线 */
.section-divider {
  height: 20px;
}

/* 科技视频和产品评测区域 */
.tech-main-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 40px;
  background-color: transparent;
}

/* 科技视频区域 */
.tech-videos {
  background-color: var(--card-bg);
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.tech-videos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 20px;
  background-color: transparent;
}

.tech-video-card {
  background-color: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
}

.tech-video-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.video-thumbnail {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 宽高比 */
  overflow: hidden;
}

.video-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.tech-video-card:hover .video-image {
  transform: scale(1.05);
}

.video-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.video-info {
  padding: 15px;
}

.video-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-color);
  margin: 0 0 10px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-secondary);
}

.video-views {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 产品评测区域 */
.tech-reviews {
  background-color: var(--card-bg);
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.product-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
  background-color: transparent;
}

.product-review-item {
  display: flex;
  flex-direction: column;
  padding: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: background-color 0.3s ease;
  background-color: rgba(40, 40, 40, 0.95); /* 提高不透明度 */
  margin-bottom: 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.product-review-item:hover {
  background-color: var(--primary-color-light);
  transform: translateX(5px);
}

.review-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 60px;
}

.rating-stars {
  color: #FFD700;
  font-size: 14px;
}

.rating-number {
  font-size: 18px;
  font-weight: bold;
  color: var(--text-color);
}

.review-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.review-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0 0 5px 0;
  line-height: 1.4;
}

.review-summary {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0 0 auto 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-secondary);
}

.review-likes {
  display: flex;
  align-items: center;
  gap: 4px;
}

.review-image {
  width: 80px;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 最新科技产品区域 */
.tech-products-section {
  background-color: var(--card-bg);
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.tech-products-carousel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.tech-product-card {
  display: flex;
  flex-direction: column;
  background-color: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
}

.tech-product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.product-thumbnail {
  position: relative;
  width: 100%;
  padding-top: 100%; /* 1:1 宽高比 */
  overflow: hidden;
}

.product-info {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-color);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-price {
  font-size: 18px;
  font-weight: bold;
  color: var(--primary-color);
  margin: 0;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  font-size: 13px;
  color: var(--text-secondary);
}

.product-category {
  background-color: var(--hover-color);
  color: var(--text-secondary);
  padding: 2px 8px;
  border-radius: 4px;
}

.product-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #FFD700;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .tech-main-content {
    grid-template-columns: 1fr;
  }
  
  .featured-news {
    grid-template-columns: 1fr 1fr;
  }
  
  .news-item.featured {
    grid-column: span 2;
  }
  
  .tech-videos-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .featured-news {
    grid-template-columns: 1fr;
  }
  
  .news-item.featured {
    grid-column: span 1;
    flex-direction: column;
  }
  
  .news-item.featured .news-image-container,
  .news-item.featured .news-content {
    width: 100%;
  }
  
  .tech-products-carousel {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  
  .header-title {
    font-size: 36px;
  }
  
  .header-subtitle {
    font-size: 16px;
  }
}
</style>